
import {Dictionary, SeleteData} from '@/api/config'
import {CSSProperties, PropType} from 'vue'
import {IconConfig} from '@/api/config'
import {defaultPageSize, defaultPage} from './dFooter'
import {VNode} from 'vue'
import type { Column } from 'element-plus'
//表格排序数据结构
export interface TableSortData{
  prop:string,
  order:'ascending'|'descending' //升序降序
}


//列的单元格类型 文本 输入框 选择器 字典选择器 插槽
type ColumnType='text'|'input'|'selete'|'dic'|'oper'|'custom'|'inputNumber'

//单元格样式回调
type StyleCallFun<T>=(row:T)=>CSSProperties

export type CellRenderProps<T> = {
  cellData: T
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  rowData: any
  rowIndex: number
}

//列的单元格渲染函数
type CellRenderer=(props:CellRenderProps<any>)=>VNode

type HeaderRenderProps<T> = {
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  headerIndex: number
}
//列的表头单元格渲染函数
type HeaderRenderer=(props:HeaderRenderProps<any>)=>VNode

//行数据
export type RowDictionary=Dictionary<string|number>


//操作配置
export interface Operation{
  name:string //按钮标识
  label:string //按钮标签
  iconConfig?:IconConfig //ICON配置
}

export interface RowOperbuttons{
  oper:Array<Operation>
}
//穿梭数据操作栏
export interface TransRowOperbuttons{
  operl:Array<Operation>
  operr:Array<Operation>
}
export interface BaseHeaderData{
   prop:string //参数
   label:string //标签
   columnType:ColumnType //类型
   width:number //宽度
   minWidth?:number //最小宽度 在自适应模式下启用(百分比动态)
   disabled?:boolean //是否禁用
   sortable?:boolean|'custom' //是否排序
   fixed?:boolean|'left'|'right' //固定
   align?:'left'|'center'|'right' //对齐方式
   'header-align'?:'left'|'center'|'right' //表头对齐方式
   columnStyle?:CSSProperties //列的样式
   styleCall?:StyleCallFun<any> //单元格样式
   headerRenderer?:HeaderRenderer //列的表头单元格渲染函数
}

export interface TextHeaderData extends BaseHeaderData{
  columnType:'text'
  showBubble?:boolean  //显示气泡
}
export interface InputHeaderData extends BaseHeaderData{
  columnType:'input'
  placeholder?:string //输入框提示
}

export interface InputNumberHeaderData extends BaseHeaderData{
  columnType:'inputNumber'
  placeholder?:string //输入框提示
  step:number //步进
  max?:number //最大值
  min?:number //最小值
  notStrictly?:boolean //不按照严格进步模式
}

export interface SeleteHeaderData extends BaseHeaderData{
  columnType:'selete'
  placeholder?:string //选择器提示
  seleteData:Array<SeleteData> //选择器数据
  multiple?:boolean //是否为多选模式
  filterable?:boolean //是否带搜索功能
}

export interface CustomHeaderData extends BaseHeaderData{
  columnType:'custom'
  cellRenderer:CellRenderer //单元格渲染函数
}

export interface OperHeaderData extends BaseHeaderData{
  columnType:'oper'
  showBubble?:boolean //显示气泡提示
  forceShowButton?:boolean //强制显示按钮
}

export type HeaderData=TextHeaderData|InputHeaderData|SeleteHeaderData|CustomHeaderData|InputNumberHeaderData|OperHeaderData

//树形配置

export type LoadFun=(row:any, treeNode:any, resolve:(data:Array<any>)=>void)=>void
export interface TreeProps{
  children:string,
  hasChildren:string
}

export const defaultTreeProps:TreeProps = {children: 'children', hasChildren: 'hasChildren'}
export interface TreeConfig{
  rowKey:string //树形数据需要指定行的唯一key
  defaultExpandAll?:boolean //是否默认展开全部
  treeProps?:TreeProps //children和hasChildren对应的字段
  lazy?:boolean //是否懒加载
  load?:LoadFun, //懒加载函数
}
//默认的表格头高和行高
const defaultHeadHeight = 40
const defaultRowHeight = 40
//多选列和序号列的宽度
export const defaultSelectionW = 50
export const defaultSortW = 65

export interface SpanMethodObj{
  rowspan: number
  colspan: number
}

//合并单元格函数
export type SpanMethod=(data:{row:any, rowIndex:number, column:any, columnIndex:number})=>Array<number> |SpanMethodObj

//是否可勾选
export type Selectable=(row:any, index:number)=>boolean

export const tableProps = {
  //表格唯一标识
  tableKey:{
    type:String,
    default:''
  },
  //表格组件绑定的key
  tableRefKey:{
    type:String,
    default:''
  },
  //表头行高度
  tableHeadHeight:{
    type:Number,
    default:defaultHeadHeight
  },
  //表格行高度
  tableRowHeight:{
    type:Number,
    default:defaultRowHeight
  },
  //表格高度
  tableHeight:{
    type:Number,
    default:300
  },
  //自适应宽高
  autoResponse:{
    type:Boolean,
    default:false
  },
  //表格宽度
  tableWidth:{
    type:Number,
    default:300
  },
  //数据
  tableData:{
    type:Array as PropType<Array<any>>,
    default:[]
  },
  //显示加载状态
  showLoading:{
    type:Boolean,
    default:false
  },
  //显示多选
  showSelection:{
    type:Boolean,
    default:false
  },
  //显示序号
  showIndex:{
    type:Boolean,
    default:false
  },
  //斑马纹
  stripe:{
    type:Boolean,
    default:false
  },
  //当前大小
  pageSize:{
    type:Number,
    default:defaultPageSize
  },
  //当前页
  currentPage:{
    type:Number,
    default:defaultPage
  },
  //空数据缺省文字
  emptyText:{
    type:String,
    default:'暂无数据'
  },
  //高亮选中
  highlightCurrentRow:{
    type:Boolean,
    default:true
  },
  //显示列边框
  border:{
    type:Boolean,
    default:true
  },
  //表格数据配置
  tableHeaderData:{
    type:Array as PropType<Array<HeaderData>>,
    required:true
  },
  //默认排序
  defaultSort:{
    type:Object as PropType<TableSortData|undefined>,
    default:() => undefined
  },
  //默认选中的项(多选)
  defaultMultipleSelection:{
    type:Array as PropType<Array<any>>,
    default:() => []
  },
  //默认选中的项(单选)
  defaultSeleted:{
    type:Object as PropType<any>,
    default:() => undefined
  },
  //树形配置
  treeConfig:{
    type:Object as PropType<TreeConfig>
  },
  //合并单元格函数
  spanMethod:{
    type:Function as PropType<SpanMethod>
  },
  //找到某条数据 滚动到该位置(垂直)
  scrollItem:{
    type:Object as PropType<any>
  },
  //行唯一的标识字段
  rowKey:{
    type:String,
    default:''
  },
  //滚动到具体位置(垂直)
  scrollTop:{
    type:Number
  },
  //列是否可勾选函数
  selectable:{
    type:Function as PropType<Selectable>
  }
}

export const tableEmits = ['sortChange', 'cellClick', 'rowClick', 'multipleSelection', 'opertionClick']